<style lang="stylus">
body.frame
  app-region no-drag

  // background #f9f9f9
  &>p
    margin 30px 30px
    width calc(100% - 60px)

    &:before
      position absolute
      content ''
      app-region drag
      top 0
      bottom 0
      left 0
      background #fff
      right 0
      border 1px solid #ccc
      border-radius 12px

    &>iframe
      app-region no-drag
      z-index 1
      // border 1px solid #eee
      position relative
      border-radius 9px
      // box-shadow 0 0 20px #eee
</style>
<style lang="stylus" scoped>
main
  flex 1
  padding 31px

.wifi
  display flex
  flex 1
  flex-direction column
  align-items center
  justify-content center

  &>h2
    font-size 16px

  &>p
    font-size 14px
    color #999

  &>i
    margin-top -40px
    display block
    width 140px
    height 140px
    background url('!/svg/wifi.svg') 50% 50% / cover no-repeat

iframe
  border 0
  flex 1
</style>

<template lang="pug">
x(@click="x")
template(v-if="line")
  template(v-if="login")
    iframe(:src="login" ref="frame" v-if="line")
  template(v-else)
    r-head
    main
      component(:is="c")
.wifi(v-else)
  i
  h2 网络请求失败
  p 请检查您的网络
</template>

<script lang="coffee">
import '~/styl/win/border.styl'
import rHead from '~/vue/head.vue'

import '~/lib/tongji.coffee'
import DEV from '../../../config/dev.js'
import ipc from '~/lib/ipc.coffee'
import {HTTP} from '@/config/site.coffee'
import x from '~/vue/x.vue'

export default {
components:{
  rHead
  x
}
setup:=>
  frame = shallowRef()
  {uid} = localStorage
  c = shallowRef()
  if uid
    ipc.USER.ID(uid)
    login = false
    load = =>
      page = location.hash[6..]
      if not page
        page = 'index'
      c.value = (await import("./main/#{page}.vue")).default
      return
    onMounted load
    window.addEventListener 'hashchange',load
  else
    login = HTTP+"login.html"
    failed = false # true # TODO
    window.addEventListener(
      "message"
      ({data})=>
        if data == 'load'
          E.xing()
          failed = false
        else
          {token,avatarUrl} = JSON.parse(data)
          localStorage.ico = avatarUrl or ''
          localStorage.uid = token
          location.hash = "main"
          location.reload()
        return
    )
    E.ing()
    onMounted =>
      {body} = document
      # 解决windows下iframe不能点击聚焦
      body.style.appRegion = "no-drag"
      body.className = "frame"
      frame.value.addEventListener 'load',->
        setTimeout(
          =>
            if failed
              location.reload()
            return
          1000
        )
        return
      return

  login = shallowRef(login)

  ###
  ipc.USER.ID(
    localStorage.uid  = 'F1442FEB170487DA70CF14EE612F804E'
  )
  ###



  line = shallowRef navigator.onLine
  window.addEventListener(
    'online'
    =>
      line.value=true
      if not uid
        location.reload()
        return
      return
  )
  window.addEventListener('offline', =>line.value=false)
  {
    c
    frame
    line
    login
    x:=>
      ipc.x()
      return
  }
}


# 谷歌离线统计用的，百度没有这功能
# if not DEV
#  await navigator.serviceWorker.register('sw.js', { scope: '/' })


</script>
